<template>
	
	<view class="goods-bar">
		<view class="goods-index-detail">
			<view class="s-list-detail" v-for="(items,index) in dataList" :key="index" @click="goodsdetail(items)">
				<view class="t-list-img">
					<image :src="items.PicLogo" mode="widthFix" lazy-load></image>
				</view>
				<view class="t-list-right">
					<view class="goods-index-title">
						<image src="../../static/buytao/jd.png" mode="widthFix" lazy-load v-if="items.ShopType=='京东'"></image>
						<image src="../../static/buytao/pdd.png" mode="widthFix" lazy-load v-if="items.ShopType=='拼多多'"></image>
						<image src="../../static/buytao/taobao.png" mode="widthFix" lazy-load v-if="items.ShopType=='淘宝'"></image>
						<image src="../../static/buytao/tianmao.png" mode="widthFix" lazy-load v-if="items.ShopType=='天猫'"></image>
						<text>{{items.Title}}</text>
					</view>
					<view class="goods-index-money">
						<text>{{items.CouponMoney}}元劵</text>
						<text>约赚{{items.Commission}}</text>
					</view>
					<view class="goods-index-price">
						￥<text>{{items.EndPrice}}</text>
						<text><del>￥{{items.Price}}</del></text>
					</view>
					<view class="goods-index-shop">
						<text>{{items.ShopName}}</text>
						<text>已售{{parseFloat(items.MonthSale/10000).toFixed(2)}}万</text>
					</view>
					<view class="goods-qiang">
						<text>马上抢</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		props:{
			dataList:Array,
			index:Number,
		},
		mounted(){
		},
		methods:{	
			//跳转商品详情
			goodsdetail(goods){				
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},			
		}
	}
</script>

<style scoped>
	.goods-index-detail{
		width:96%;
		padding:2%;
	}
	.s-list-detail{
		width:100%;
		display: flex;
		flex-direction:row;
		flex-wrap:wrap;
		white-space:nowrap;
	}
	.t-list-img{
		width:40%;
	}
	.t-list-right{
		width:56%;
		padding-left:4%;
	}
	.t-list-img image{
		width:100%;
		height:200upx;
		margin-top:10upx;
		border-radius:15upx;
	}
	.goods-index-title{
		width:100%;
		display:flex;
	}
	.goods-index-title>image{
		width:50upx;
		height:50upx;
		display:inline-block;
		position:relative;
	}
	.goods-index-title>text{
		display:block;
		padding-left:10upx;
		width:80%;
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.goods-index-money{
		margin-top:20upx;
	}
	.goods-index-money>text:first-child{
		background:#ffd9d9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#F76260;
		border-radius:5upx;
	}
	.goods-index-money>text:last-child{
		background:#8A6DE9;
		font-size:15upx;
		padding:7upx 15upx;
		color:#fff;
		margin-left:20upx;
		border-radius:10upx;
	}
	.goods-index-price{
		color:#F76260;
	}
	.goods-index-price>text:first-child{
		font-size:40upx;
	}
	.goods-index-price>text:last-child{
		color:#ccc;
		margin-left:20upx;
	}
	.goods-index-shop{
		font-size:20upx;
		color:#ccc;
	}
	.goods-index-shop>text:last-child{
		margin-left:20upx;
	}
	.goods-qiang{
		text-align: right;
	}
	.goods-qiang>text{
		padding:10upx 20upx;
		background-color: #FF3333;
		color:#FFFFFF;
		border-radius:15upx;
	}
</style>
